<!--
 * @Author: your name
 * @Date: 2021-04-19 18:58:21
 * @LastEditTime: 2021-04-19 18:58:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \the-third-group\app\src\views\pages\doctor\office\docList\docDetail.vue
-->
<template>
  <div class="docDetail">
    <p>医生详情</p>
    <div class="search">
      <input
        type="text"
        placeholder="请输入要搜索的患者"
        v-model="ipt"
        @input="handleSearch"
      />
      <div v-if="ipt !== ''">
        <el-table :data="renderList" border style="width: 100%">
          <el-table-column prop="id" label="序号"></el-table-column>
          <el-table-column
            prop="time"
            label="问诊时间"
            width="180"
          ></el-table-column>
          <el-table-column prop="name" label="医师姓名"></el-table-column>
          <el-table-column prop="hospital" label="医师隶属医院">
          </el-table-column>
          <el-table-column prop="grade" label="医师等级"></el-table-column>
          <el-table-column prop="moneny" label="收取问诊金额">
          </el-table-column>
          <el-table-column prop="hname" label="患者姓名"></el-table-column>
          <el-table-column prop="type" label="病情"></el-table-column>
          <el-table-column prop="age" label="年龄"></el-table-column>
          <el-table-column prop="handle" label="操作"></el-table-column>
        </el-table>
      </div>
      <div v-else>
        <el-table :data="docdetail" border style="width: 100%">
          <el-table-column prop="id" label="序号" width="50"></el-table-column>
          <el-table-column
            prop="time"
            label="问诊时间"
            width="70"
          ></el-table-column>
          <el-table-column prop="name" label="医师姓名" width="80"> </el-table-column>
          <el-table-column prop="hospital" label="医师隶属医院" width="100">
          </el-table-column>
          <el-table-column prop="grade" label="医师等级"> </el-table-column>
          <el-table-column prop="moneny" label="收取问诊金额">
          </el-table-column>
          <el-table-column prop="hname" label="患者姓名"> </el-table-column>
          <el-table-column prop="type" label="病情"> </el-table-column>
          <el-table-column prop="age" label="年龄"> </el-table-column>

          <el-table-column prop="handle" label="操作" >
            <template slot-scope="scope" >
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                :data="list"
              >
                <el-button type="text" @click="dialogVisible = true"
                
                  >查看
                  <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose" >
                      <ul class="detail">
                        <li><span>时间：</span>{{list.time}}</li>
                        <li><span>序号：</span>{{list.id}}</li>
                        <li><span>医师姓名：</span>{{list.name}}</li>
                        <li><span>医师等级：</span>{{list.grade}}</li>
                        <li><span>患者姓名：</span>{{list.hname}}</li>
                        <li><span>医师隶属医院：</span>{{list.hospital}}</li>
                        <li><span>症状：</span>{{list.type}}</li>
                        <li><span>金额：</span>{{list.moneny}}</li>
                        <li><span>年龄：</span>{{list.age}}</li>
                      </ul>
                  </el-dialog>
                </el-button>
                
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      ipt:"",
      renderList: [],//渲染的列表
      list:[],//点击一行对应的数据
      dialogVisible: false,
      docdetail:[]//总数据
    };
  },
  //请求数据
  created(){
    axios({
      url:"/api/docdetail"
    }).then(res=>{
      //赋值
      this.docdetail = res.data.docdetail
    })
  },
  methods: {
    //模糊搜索
    handleSearch() {
      this.renderList = this.tableData.filter((item) => {
        return item.order.includes(this.ipt);
      });
      console.log(this.renderList)
    },
    handleClick(row) {
      //console.log(row);
      this.list = row;
    },
    handleClose(done) {
      this.$confirm("确认关闭?")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.docDetail p {
  width: 100%;
  height: 30px;
  line-height: 30px;
  border-bottom: 2px solid rgb(51, 51, 180);
}
.docDetail .search {
  width: 100%;
  height: 40px;
  line-height: 40px;
}
.docDetail .detail li{
  list-style: none;
  height: 30px;
  span{
    float: left;
  }
}
</style>